<template>
  <div>
    <van-cell-group inset>
      <van-field
        required
        v-model="tel"
        label="请输入手机号"
        placeholder="请输入手机号"
        :error-message="flag"
      />
    </van-cell-group>

    <van-button
      type="danger"
      @click="nextClick"
      :disabled="flag == 'ok' ? false : true"
      >下一步</van-button
    >
  </div>
</template>

<!-- 
1 输入框的验证  保证输入框有值 并且值是符合手机号码规则的   
2  点击下一步 进行发送请求  判断该手机没有注册 如果注册了 那么 跳转到登录页面 
如果没有注册那么进行一步注册(把该手机号码存储到本地缓存里面)
 -->

<script setup lang="ts">
import { useUserStore } from '@/store/userStore'

import { ref, computed } from 'vue'

import { checkTel } from '@/apis/user'

import { showDialog } from 'vant'

import { useRouter } from 'vue-router'

const router = useRouter()

const user = useUserStore()

const tel = ref(localStorage.getItem('tel'))
const pattern = /^\d{11}$/ //  数字11位

// / 1  点击  不一定   如果  没有手机号 或者手机号验证不对   按钮不让点击
const flag = computed(() => {
  if (!tel.value) {
    return '手机号不能为空'
  }

  if (!pattern.test(tel.value)) {
    return '手机号格式不对'
  }

  return 'ok'
})

// 2 点击的时候发送请求    成功  弹出 成功提示 而且 表明 当前手机号

const nextClick = async () => {
  let res = await checkTel({ tel: tel.value })

  console.log(res)

  if (res.code == '200') {
    showDialog({ message: tel.value + res.message })

    //存储 输入的手机号码
    user.setTel(tel.value)

    //跳转路由  下一步
    router.push('/register/code')
  } else if (res.code == '10005') {
    showDialog({ message: tel.value + res.message })
    //  返回登录页面 进行登录
    router.push('/login')
  }
}
</script>

<style scoped lang="scss">
.van-button {
  margin-top: 10px;
  width: 100%;
}
</style>
